<!DOCTYPE html>
<html lang="en">
<head>
    <title>添加客户信息</title>
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <link rel="stylesheet" href="/css/laypage.css">
    <link rel="stylesheet" href="/layui-util/css/layui.css" media="all">
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/jquery.validation/1.14.0/jquery.validate.min.js"></script>
    <script src="/js/jquery.validation/1.14.0/messages_zh.min.js"></script>
    <script src="/js/vue/vue.min.js"></script>
    <script src="/layui-util/layui.js" charset="utf-8"></script>
    <script src="/js/layer/layer.js" charset="utf-8"></script>
    <style>
        input.error {
            border: 1px solid red;
        }
    </style>
</head>
<body>
<section id="container">
<#include "sider.ftl">
    <section id="main-content">
        <section class="wrapper">
            <div class="table-agile-info">
                <div class="panel panel-default">
                    <section class="panel">
                        <header class="panel-heading">
                            添加客户基本信息
                        </header>
                        <div class="panel-body">
                            <div class="form" id="app">
                                <form id="addUserForm">
                                    <br/>
                                    <div class="form-group">
                                        <label for="sname">客户姓名：</label> <input type="text" class="form-control" id="sname" name="sname"
                                                                                placeholder="输入名字">
                                    </div>
                                    <div class="form-group">
                                        <label for="ssex">性别：</label> <input type="text" class="form-control" id="ssex" name="ssex"
                                                                                placeholder="输入性别">
                                    </div>
                                    <div class="form-group">
                                        <label for="sage">客户年龄：</label> <input type="text" class="form-control" id="sage" name="sage"
                                                                                placeholder="输入年龄">
                                    </div>
                                    <div class="form-group">
                                        <label for="sphone">客户电话</label> <input type="text" class="form-control" id="sphone" name="sphone"
                                                                                placeholder="输入电话号">
                                    </div>
                                    <div class="form-group">
                                        <label for="scardId">身份证号</label> <input type="text" class="form-control" id="scardId" name="scardId"
                                                                                 placeholder="输入身份证号"><span id="msg2"></span>
                                    </div>
                                    <div class="form-group">
                                        <label for="saddress">住址</label> <input type="text" class="form-control" id="saddress" name="saddress"
                                                                                placeholder="输入客户住址">
                                    </div>

                                    <div class="form-group">
                                        <button type="button" id="saveBtn" class="btn btn-success">提交</button>
                                        <button type="button" id="cancelBtn" class="btn btn-default">取消</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </section>
                </div>
            </div>
        </section>
    <#include "/foot.html">
    </section>
</section>
</body>
</html>
<script>
    var addUser = function () {
        if (!check().form()) {
            return;
        }

        $.ajax({
            type: 'POST',
            async:false,
            dataType: 'json',
            url: '/user/user_add.do',
            data: $("#addUserForm").serialize(),
            success: function () {
                /*$("#cancelBtn").click();*/
                layer.open(window.location="/user/toList.do");
            }
        });
    }

    $("#saveBtn").click(function () {

        addUser();
        if (check2()===true){
            $("#msg2").html("正确");

        } else{
            $("#msg2").html("不正确");
        }
    });



    function check() {
        return $("#addUserForm").validate({
            rules: {
                sname: {
                    required: true
                },
                ssex:{
                    required:true
                },
                sage:{
                    required:true
                },
                sphone:{
                    required: true,
                   number: true,
                    digits: true,
                    maxlength:11,
                    minlength:11,
                    regex:"0?(13|14|15|18|17)[0-9]{9} "
                },
                scardId:{
                    required: true,
                    number:true,
                    digits:true,
                    minlength:18,
                    maxlength:18
                },
                saddress: {
                    required: true
                }
            },
            messages: {
                sname: {
                    required: "不能为空"
                },
                ssex:{
                    required:""
                },
                sage:{
                    required:""
                },
                sphone:{
                    required: "输入不正确"
                },
                scardId:{
                    required: ""
                },
                saddress:{
                    required: ""
                }
            }
        });
    }

    function check2() {
        var id = $("#scardId").val();
        console.log(id);
        var reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
        if (reg.test(id) ===false) {
            /*  alert("输入的不合法");*/
            return false;
        } else {
            return true;
        }
    }


</script>


